<template>
  <div>
    <Introduce/>
    <el-row :gutter="8">
      <el-col :md="16" :sm="24">
      <el-tabs style="background: #fff;padding: 10px;" v-model="tabActive" @tab-change="handleTabChange">
        <el-tab-pane label="收款数据" name="shop">
          <Sales ref="shopRef" :type="1"/>
        </el-tab-pane>
        <el-tab-pane label="代付数据" name="store">
          <Sales ref="storeRef" :type="2"/>
        </el-tab-pane>
      </el-tabs>
    </el-col>
      <el-col :md="8" :sm="24" style="background: #fff">
        <div class="document_box">对接文档 <span>点击查看API文档》</span></div>
        <div class="document_box">用户须知 <span>点击查看用户须知》</span></div>
        <div class="document_box">官方通知</div>
        <div class="document_box_title">扒拉巴拉巴</div>
<!--        <h4 class="sales-item-label">{{tabActive=='shop'?'收款':'代付'}}客户排行榜</h4>-->
        <ul class="ranking">
          <li v-if="salesData.length > 0" v-for="(item, index) in salesData">
            <el-text truncated>
              <span :class="{ circle: true, active: index < 3 }">{{ index + 1 }}</span>
              <span> {{ item.merchant.name }}</span>
            </el-text>
            <span>{{ numeral(item.amount).format('0.00') }}</span>
          </li>
          <el-empty v-else :image-size="64" description="暂无数据"/>
        </ul>
      </el-col>
    </el-row>

    <el-row v-if="false" :gutter="8">
      <el-col :md="12" :sm="24" style="margin-bottom: 8px">
        <TopSearch/>
      </el-col>
      <el-col :md="12" :sm="24" style="margin-bottom: 8px">
        <SalesProportion/>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, provide, ref } from 'vue';
import Introduce from './components/introduce.vue';
import Sales from './components/sales.vue';
import TopSearch from './components/top-search.vue';
import SalesProportion from './components/sales-proportion.vue';
import { useDark } from '@vueuse/core';
import '@/utils/echarts';
import { THEME_KEY } from 'vue-echarts';
import numeral from "numeral";
import {consoleStoreOrder} from "@/api/dashboard.ts";

// const isDark = useDark();
// const eChartTheme = computed(() => (isDark.value ? 'dark' : ''));
// provide(THEME_KEY, eChartTheme);

defineOptions({
  name: 'Console', // 不命名组件，keep-alive的include不属性生效
});
const salesData=ref([])
const tabActive = ref('shop');
const consoleList=()=>{
  consoleStoreOrder({type:tabActive.value=='shop'?1:2,action:'rank'}).then(res=>{
    salesData.value=res.body
  })
}
consoleList()

const handleTabChange = () => {
  salesData.value=[]
  consoleList()
}
</script>

<style lang="scss" scoped>
.card_box_cir {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .card_box_cir1 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .svg-icon {
      font-size: 18px;
      color: #fff;
    }
  }
}

.one {
  background: #e4ecff;
}

.one1 {
  background: #4d7cfe;
}
.row_list{
  display: flex;
}
.sales-item-label {
  padding:0 10px 13px 10px;
  border-bottom: 1px solid var(--el-border-color-light);
}
.sales-chart-warp {
  height: 480px;
  width: 100%;
}
.document_box{
  padding:20px 24px 0 24px ;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: rgba(0,0,0,0.85);
  span{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    margin-left: 16px;
  }
}
.document_box_title{
  width: 90%;
  margin: 0 auto;
  padding: 16px;
  background: #F5F5F5;
  border-radius: 4px;
  margin-top: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 24px;
}
.ranking {
  list-style-type: none;
  padding: 0;
  margin: 0;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;

    .circle {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      margin-right: 8px;

      &.active {
        background-color: var(--el-color-primary-light-9);
      }
    }
  }
}
</style>
